//
//  OptHomework.swift
//  SwiftUIStacks
//
//  Created by 李煜 on 2024/7/31.
//

import SwiftUI

//优化堆叠作业
struct OptHomework: View {
    var body: some View {
      ZStack {
        Card(icon:"burst.fill", title: "Basic", price: "$9", textColor: .white, bgColor: .purple)
          .padding()
          .offset(x: 0, y: 180)
//          .background(.cyan)
//          .opacity(0.4)
        Card(icon:"dial", title: "Pro", price: "$19", textColor: .white, bgColor: .orange)
          .scaleEffect(0.9)
          .padding()
        Card(icon:"wand.and.rays", title: "Team", price: "$299", textColor: .white, bgColor: .gray)
          .padding()
          .scaleEffect(0.8)
          .offset(x: 0, y: -180)
          
      }
      // ZStack中元素其实是相对ZStack定位,也可以说是相对首元素初始位置定位.因为首元素的初始位置=ZStack位置 注意如下ZStack的初始偏移,可以使用Canvas->Selectable模式查看边框
      .offset(x: 50.0, y: 10.0)
      .background(.cyan)
    }
}
struct Card : View {
  var icon: String
  var title: String
  var price: String
  var textColor: Color
  var bgColor: Color
  var body: some View {
    VStack {
      Image(systemName: icon)
        .font(.largeTitle)
        .foregroundStyle(textColor)
      Text(title)
        .font(.system(.title, design: .rounded, weight: .semibold))
        .foregroundStyle(textColor)
      Text(price)
        .font(.system(size: 40, weight: .black, design: .rounded))
        .foregroundStyle(textColor)
      Text("per month")
        .font(.headline)
        .foregroundStyle(.white)

    }
    .frame(minWidth: 0, maxWidth: .infinity,minHeight:  100)
    .padding(40)
    .background(bgColor)
    .cornerRadius(10)

    
  }
}
#Preview {
    OptHomework()
}
